<template>
  <div class="userBox bg-f2">
    <div class="bg-fff">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="pAll">
        <el-breadcrumb-item>
          <span @click="goBack">资产管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form class="pAll" :model="zclxForm" :rules="rules" ref="zclxForm" label-width="130px">
        <el-row>
          <el-col :span="2">
            <!-- 资产信息： -->
            <span class="title"></span>
          </el-col>
          <el-col :span="8">
            <div class="konBox" v-show="!haoshow"></div>
            <el-form-item label="添加资产:" prop="name" v-show="haoshow">
              <el-radio-group v-model="radio" @change="radiochange">
                <el-radio label="单个添加">单个添加</el-radio>
                <el-radio label="批量导入" :disabled="pBtn1">批量导入</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="pilian_btn" v-if="!ifTag">
              <div>您将通过上传的Excel文件，快速导入资产设备；</div>
              <div>
                导入前，请先
                <el-link
                  type="primary"
                  :underline="false"
                  :href="piliandaorumoban + 'annex/cmmop/template/资产导入模板.xlsx'"
                  target="_blank"
                >下载资产导入模板</el-link>填写完成后再上传表格
              </div>
            </div>
            <el-form-item label="导入文件:" v-if="!ifTag">
              <el-upload
                drag
                ref="upload"
                action="#"
                :auto-upload="false"
                :limit="1"
                accept=".xlsx, .XLSX"
                :on-change="pilalal"
                :on-remove="pihandleRemove"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">支持 20MB 以内的 xlsx 文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="资产类型:" v-if="ifTag" prop="ZCLX" class="borderBottom">
              <el-cascader
                ref="cascaderAdd"
                @change="qiehuanyemian"
                v-model.trim="zclxForm.ZCLX"
                :options="zclxOptions"
                :props="{ checkStrictly: true }"
                filterable
                clearable
                class="inputSelect"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="fooer_btn" v-if="radio !== '单个添加' ? true : false">
          <el-button class="btnSizeStyle" size="medium" @click="goBack">取消</el-button>
          <el-button
            class="btnSizeStyle"
            type="primary"
            :disabled="piliandaor !== '' ? false : true"
            size="medium"
            @click="pibaoCun()"
            v-if="radio !== '单个添加' ? true : false"
            v-preventReClick
          >保存</el-button>
          <!-- <el-button class="btnSizeStyle" type="primary" :disabled="piliandaor" size="medium" @click="pibaoCun()" v-if="radio !== '单个添加' ? true : false" v-preventReClick>保存</el-button> -->
        </div>
      </el-form>
      <div v-if="ifTag">
        <!-- {{ sbmbOne }} -->
        <!-- 除了主机、动力环境和服务器存储之外的界面 -->
        <mb-one v-if="sbmbOne === 1" :zclxForm="zclxForm" @guanbi="guanbi($event)"></mb-one>
        <!-- 动力环境-传感器 -->
        <mb-Two v-else-if="sbmbOne === 2" :zclxForm="zclxForm"></mb-Two>
        <!-- 服务器存储 -->
        <mb-Three v-else-if="sbmbOne === 3" :zclxForm="zclxForm"></mb-Three>
      </div>
    </div>
  </div>
</template>
<script>
import { ziC, topUrl } from '@/utils/allUrl.js'
import mbOne from '@/components/AddSBmb/mbOne.vue'
import mbTwo from '@/components/AddSBmb/mbTwo.vue'
import mbThree from '@/components/AddSBmb/mbThree.vue'
import { getUrl } from '../../utils/getUrl'
// import { getAuthority } from '@/assets/js/getAuthority.js'
export default {
  data() {
    // 串口码验证规则
    return {
      radio: '单个添加',
      ifTag: true,
      // 判断是否为编辑
      haoshow: true,
      // 修改资产ID
      xiuID: '',
      // 资产类型
      zclxOptions: [],
      zclxForm: {
        ZCLX: ''
      },
      rules: {
        ZCLX: [{ required: true, message: '此次为必填项', trigger: 'change' }, { validator: this.validatezclx }]
      },
      // ruleForm: '', // 添加资产类型
      title: '', // 标题
      goliebiao: false, // 防重复点击
      piliandaor: '',
      // piliandaor: false,
      pBtn1: false,
      sbmbOne: 0,
      piliandaorumoban: topUrl
    }
  },
  components: { mbOne, mbTwo, mbThree },
  created() {
    // 获取资产类型
    this.getzichanlx()
  },
  mounted() {
    // // console.log(this.$parent)
    // // console.log('----')
    // var origin = window.location.origin
    if (getUrl('jurisdiction')) {
    } else {
      // getAuthority(this, 'property') // 获取权限
      // location.href = `${origin}#/propertyList`
    }
    const { title, content, zclx, piLianExcel } = this.$route.query
    if (piLianExcel) {
      this.pBtn1 = JSON.parse(piLianExcel) // 使用json.parse转为布尔值
    }
    this.title = title
    if (content) {
      this.haoshow = false
      // this.zclxForm.ZCLX = content.zclx
      // setTimeout(() => {
      //   this.morenjiazai()
      // }, 200)
      this.setList(content)
    }
    if (zclx) {
      this.zclxForm.ZCLX = zclx
      this.$refs.cascaderAdd.inputValue = '摄像机'
      this.sbmbOne = 1
      setTimeout(() => {
        this.morenjiazai()
      }, 300)
    }
  },
  methods: {
    // 获取编辑资产数据
    async setList(id) {
      const params = new URLSearchParams()
      params.append('ID', id)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectByID`, params)
      if (res.code === '0000') {
        this.zclxForm.ZCLX = res.data.zclx
        setTimeout(() => {
          this.morenjiazai()
        }, 100)
      } else {
        this.zclxForm.ZCLX = ''
        this.tableMessage = res.message
      }
    },
    // 获取资产类型
    async getzichanlx() {
      const params = new URLSearchParams()
      params.append('FLXID', 0)
      params.append('QCZCLX', 53)
      const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
      const city = JSON.stringify(res.data.list)
      const newCity = city.replace(/id/g, 'value')
      const cityList = newCity.replace(/lxmc/g, 'label')
      this.zclxOptions = JSON.parse(cityList)
    },
    radiochange(e) {
      if (e !== '批量导入') {
        this.ifTag = true
        this.zclxForm.ZCLX = ''
        this.sbmbOne = 0
      } else {
        this.ifTag = false
      }
    },
    async pibaoCun() {
      // console.log('进来了-------------')
      const fd = new FormData()
      fd.append('fileUpload', this.piliandaor) // 传文件
      const { data: res } = await this.$http.post(`${ziC}zcgl/insertZiChanExcel`, fd)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        this.goliebiao = false
        return this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true
      })
      // this.$router.push('/propertyList')
      this.goBack()
    },
    // 批量添加文件
    pilalal(el) {
      let videoSize = el.size / (1024 * 1024) // 转成M格式
      videoSize = videoSize.toFixed(1) // 保留小数点后一位
      if (videoSize > 20) {
        const dele = this.$refs.upload.uploadFiles
        const index = dele.findIndex(item => item.uid === el.uid)
        dele.splice(index, 1)
        return this.$message({
          type: 'error',
          message: '文件超过最大限制20MB',
          center: true
        })
      } else {
        this.piliandaor = el.raw
      }
    },
    // 批量删除文件
    pihandleRemove(el) {
      if (el.uid === this.piliandaor.uid) {
        this.piliandaor = ''
      }
    },
    qiehuanyemian(val) {
      this.zclxForm.ZCLX = val || ''
      setTimeout(() => {
        const xz = this.$refs.cascaderAdd.getCheckedNodes()
        if (xz.length > 0) {
          if (xz[0].data.mb === 1) {
            this.sbmbOne = 1
          } else if (xz[0].data.mb === 2) {
            this.sbmbOne = 2
          } else if (xz[0].data.mb === 3) {
            this.sbmbOne = 3
          }
        } else {
          this.sbmbOne = 0
        }
      }, 100)
    },
    morenjiazai() {
      this.$nextTick(() => {
        const xz = this.$refs.cascaderAdd.getCheckedNodes()
        if (xz.length > 0) {
          if (xz[0].data.mb === 1) {
            this.sbmbOne = 1
          } else if (xz[0].data.mb === 2) {
            this.sbmbOne = 2
          } else if (xz[0].data.mb === 3) {
            this.sbmbOne = 3
          }
        } else {
          this.sbmbOne = 0
        }
      })
    },
    goBack() {
      // 、:to="{ path: '/propertyList' }"
      // console.log(this.$route.query)
      const params = {
        pingpai: this.$route.query.pingpai, // 品牌
        zicanglx: this.$route.query.zicanglx, // 资产类型
        zicanZT: this.$route.query.zicanZT, // 资产状态
        azTime: this.$route.query.azTime, // 安装时间
        sous: this.$route.query.sous // 资产名称/ip/sn号
        // currentPage: this.$route.query.currentPage, // 当前页
        // pageSize: this.$route.query.pageSize, // 页码
      }
      if (this.$route.query.url === 'notStock') {
        params.wlzt = this.$route.query.wlzt
        params.value = this.$route.query.value
      }
      this.$router.push({
        name: this.$route.query.url,
        params: params
      })
    },
    guanbi(val) {},
    // 判断传感器
    validatezclx(rule, value, callback) {
      // if (value === 65627) {
      //   return callback(new Error('当前资产类型必须选到最下级'))
      // } else {
      //   return callback()
      // }
      if (value.length === 2) {
        if (value[1] === 65627) {
          return callback(new Error('当前资产类型必须选到最下级'))
        } else {
          return callback()
        }
      } else {
        return callback()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.userBox {
  .el-row {
    // border-bottom: 1px solid #f2f2f2;
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
    .el-form-item {
      .inputSelect {
        width: 260px;
      }
      .el-upload__tip {
        font-size: 12px;
        color: #a1a3a8;
        margin-top: 7px;
        padding-left: 10px;
      }
    }
    .borderBottom {
      padding: 0;
      margin-bottom: 5px;
    }
    .pilian_btn {
      position: relative;
      width: 258%;
      top: -25px;
      left: 65px;
      padding: 0 18px;
      background-color: #fffbe6;
      > div {
        height: 30px;
        line-height: 30px;
        color: #e28b02;
        .xiaBtn {
          padding: 0;
        }
      }
    }
    .konBox {
      height: 68px;
    }
  }
  .fooer_btn {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
